<template>
	<view class="rankList">
		<comHead :title="$t('index.gxphb')" :isLeft="true" :isRight="false" rType="rankList"></comHead>
		<view class="contentBox">
			<card-swiper @swiperChange="swiperChange" :list="episodeCharacter"></card-swiper>
			<view class="box">
				<view class="rechange" @click="isPay=true">{{$t('index.cz')}}</view>
				
				<view class="titBtn">
					<text>{{episodeCharacter[active].name}} {{$t('index.fsb')}}</text>
					<image @click="comLink('/pages/index/rankInfo')" src="https://siha.vxmeng.com/static/index/wh.png" mode="widthFix"></image>
				</view>
				<view class="qs">
					<view class="item" v-if="episodeCharacterBang.length>1">
						<view class="imgs">
							<image :src="getImg(episodeCharacterBang[1] && episodeCharacterBang[1].avatar)"
								mode="aspectFill"></image>
							<image src="https://siha.vxmeng.com/static/my/MasterDDSSlicePNG51aefe9b1c65a52226508f5bbf9c3a51.png"
								mode="aspectFill"></image>
						</view>
						<text>{{episodeCharacterBang[1].nickname}}</text>
						<text>{{episodeCharacterBang[1].pow_num>0?episodeCharacterBang[1].pow_num:0}}</text>
						<image src="https://siha.vxmeng.com/static/index/d2.png" mode="widthFix"></image>
					</view>
					<view class="item" v-if="episodeCharacterBang.length>0">
						<view class="imgs">
							<image :src="getImg(episodeCharacterBang[0]&&episodeCharacterBang[0].avatar)"
								mode="aspectFill"></image>
							<image src="https://siha.vxmeng.com/static/my/MasterDDSSlicePNG51aefe9b1c65a52226508f5bbf9c3a51.png"
								mode="aspectFill"></image>
						</view>
						<text>{{episodeCharacterBang[0].nickname}}</text>
						<text>{{episodeCharacterBang[0].pow_num>0?episodeCharacterBang[0].pow_num:0}}</text>
						<image src="https://siha.vxmeng.com/static/index/d1.png" mode="widthFix"></image>
					</view>
					<view class="item" v-if="episodeCharacterBang.length>2">
						<view class="imgs">
							<image :src="getImg(episodeCharacterBang[2]&&episodeCharacterBang[2].avatar)"
								mode="aspectFill"></image>
							<image src="https://siha.vxmeng.com/static/my/MasterDDSSlicePNG51aefe9b1c65a52226508f5bbf9c3a51.png"
								mode="aspectFill"></image>
						</view>
						<text>{{episodeCharacterBang[2].nickname}}</text>
						<text>{{episodeCharacterBang[2].pow_num>0?episodeCharacterBang[2].pow_num:0}}</text>
						<image src="https://siha.vxmeng.com/static/index/d3.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in episodeCharacterBang" v-if="index>=3">
						<view class="l">
							<text>{{index+1}}</text>
						</view>
						<view class="m">
							<image :src="getImg(item.avatar)"
								mode="aspectFill"></image>
							<text>{{item.nickname}}</text>
						</view>
						<view class="r">
							<!-- <text>{{item.num>0?item.num:0}}</text> -->
							<text>{{item.pow_num>0?item.pow_num:0}}</text>
						</view>
					</view>
				</view>
				<view class="my">
					<view class="l">
						<image :src="getImg(user_bang.avatar)"
							mode="aspectFill"></image>
					</view>
					<view class="m">
						<view>{{user_bang.nickname}}</view>
						<text>{{$t('index.gxz')}} {{user_bang.user_num}}</text>
						<text v-if="user_bang.bang_num!=1">{{$t('index.jlqyw')}} {{user_bang.shang_cha>0?user_bang.shang_cha:0}} {{$t('index.gxz')}}</text>
					</view>
					<view class="r">
						<text>{{user_bang.bang_num}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<comPay v-if="isPay" @hidePay="hidePay"></comPay>
		<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY -->
			<comLack v-if="isLack" @hide="hideLack" value="10000"></comLack>
		<!-- #endif -->
		<comReward v-if="isObtain"></comReward>
	</view>
</template>

<script>
	import cardSwiper from "@/components/helang-cardSwiper/helang-cardSwiper"
	export default {
		components: {
			cardSwiper
		},
		data() {
			return {
				page: 1,
				isPay: false,
				isLack: false,
				isObtain: false,
				active:0,
				episode_script_id:'',
				episodeCharacter:[],
				episodeCharacterBang:[],
				user_bang:{}
			}
		},
		onShow() {
			if(this.$tools.getStore('share_dou')){
				this.$music.play_obtain();
				this.isObtain = true;
				clearTimeout(this.timer);
				this.timer = setTimeout(()=>{
					this.isObtain = false;
					// this.userinfo.money = Number(this.changeAmount) + Number(this.userinfo.money);
				}, 1500);
				this.$tools.setStore('share_dou', false)
			}
		},
		onLoad(options) {
			console.log(options)
			this.episode_script_id = options.episode_script_id
			this.getEpisodeCharacter()
		},
		methods: {
			hideLack(){
				this.isLack = false
			},
			hidePay(e){
				this.isPay=false
				if(e == 1){
					this.isLack = true
				}
			},
			swiperChange(e){
				this.active = e
				this.page = 1
				this.episodeCharacterBang = []
				this.getEpisodeCharacterBang(e)
			},
			async getEpisodeCharacter() {
				const res = await this.$myRequest({
					url: 'api/episode/getEpisodeCharacter',
					data: {
						episode_script_id:this.episode_script_id
					}
				})
				if (res.code == 1) {
					console.log(res)
					this.episodeCharacter = res.data.list
					this.getEpisodeCharacterBang(0)
				}
			},
			async getEpisodeCharacterBang(index) {
				const res = await this.$myRequest({
					url: 'api/episode/getEpisodeCharacterBang',
					data: {
						episode_character_id:this.episodeCharacter[index].id,
						page: this.page
					}
				})
				if (res.code == 1) {
					console.log(res)
					this.episodeCharacterBang = [...this.episodeCharacterBang, ...res.data.list]
					if(this.episodeCharacterBang.length > 100){
						this.episodeCharacterBang.length = 100
					}
					this.user_bang = res.data.user_bang
				}
			},
		},
		onReachBottom(){
			if(this.episodeCharacterBang.length < 100){
				this.page++
				this.getEpisodeCharacterBang(this.active)
			}else{
				this.$tools.showTx(this.$t('gdjj.mygdl'))
			}
		}
	}
</script>

<style lang="less" scoped>
	.rankList {
		min-height: 100vh;
		// background: linear-gradient(147deg, #222222 0%, rgba(30, 36, 44) 104%);
		background-color: #1c0c20;
	}

	.contentBox {
		// height: calc(100vh - 200rpx);
		height: auto;
		overflow: auto;
		margin-top: -80rpx;
	}

	.box {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
		margin-top: -100rpx;
		z-index: 101;
		position: relative;
		// height: calc(100vh - 600rpx);
		// /* #ifdef MP-WEIXIN */
		// height: calc(100vh - 700rpx);
		// /* #endif */
		// position: absolute;
		// bottom: 0;
		// left: 0;
		background: linear-gradient(147deg, #222222 0%, rgba(30, 36, 44) 104%);
		border-radius: 24rpx 24rpx 0px 0px;
		
		.rechange{
			position: absolute;
			right: 40rpx;
			top: -46rpx;
			z-index: 102;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			// background: linear-gradient(144deg, rgba(48, 126, 254, 0.7569) 12%, #D614FF 109%);
			background: url('https://siha.vxmeng.com/static/index/cz-bg.png') no-repeat center/cover;
			font-size: 28rpx;
			// box-shadow: inset 17px 17px 26px 0px rgba(91, 143, 249, 0.8),inset 32px 32px 51px 0px #5B8FF9,inset -21px -21px 21px 0px rgba(255, 255, 255, 0.4),inset -1px -1px 6px 0px rgba(255, 255, 255, 0.65);
		}

		.titBtn {
			width: 406rpx;
			height: 80rpx;
			flex-shrink: 0;
			background: linear-gradient(90deg, #62B6FC 0%, #5F58FD 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 34rpx;
			font-weight: bold;
			color: #fff;
			border-radius: 60rpx;
			margin-top: -40rpx;
			text-align: center;

			image {
				width: 32rpx;
				margin-left: 10rpx;
			}
		}

		.qs {
			display: flex;
			align-items: center;
			justify-content: center;

			.item {
				width: 200rpx;
				flex-shrink: 0;
				border-radius: 24px;
				background: linear-gradient(270deg, rgba(#FFCC00, 0.1) 0%, rgba(#FF9D00, 0.1) 100%);
				display: flex;
				padding: 20rpx 20rpx 40rpx;
				box-sizing: border-box;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;

				&:nth-child(1),
				&:nth-child(3) {
					margin-top: 50rpx;
					background: linear-gradient(270deg, rgba(#F9EAEB, 0.1) 0%, rgba(#F1D0D3, 0.1) 100%);
				}

				&:nth-child(2) {
					margin: 0 30rpx;
				}

				.imgs {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 132rpx;
					height: 132rpx;

					image {
						width: 96rpx;
						height: 96rpx;

						&:nth-child(2) {
							width: 132rpx;
							height: 132rpx;
							position: absolute;
							top: 0;
							left: 0;
						}
					}
				}

				text {
					font-size: 24rpx;
					color: #fff;
					margin-top: 10rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					-webkit-line-clamp: 1;
					text-overflow: ellipsis;
					&:nth-child(3) {
						font-size: 24rpx;
						background: linear-gradient(270deg, #5F58FD 0%, #62B6FC 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						text-fill-color: transparent;
					}
				}

				>image {
					width: 80rpx;
					position: absolute;
					bottom: 0;
					margin-bottom: -40rpx;
				}
			}
		}

		.list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: column;
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 60rpx;
			padding-bottom: 200rpx;
			// height: calc(100vh - 1100rpx);
			// overflow: auto;
			.item {
				width: 100%;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 15rpx 0;
				background-color: #1F221D;
				border-radius: 20rpx;
				margin-top: 10rpx;

				.l {
					font-size: 28rpx;
					padding-left: 40rpx;
					width: 100rpx;
				}

				.m {
					display: flex;
					align-items: center;
					// width: 60%;
					flex: 1;
					font-size: 16px;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}

				.r {
					width: 120rpx;
					padding-right: 40rpx;
					text-align: end;
					text {
						font-size: 24rpx;
						// padding-right: 40rpx;
						background: linear-gradient(270deg, #5F58FD 0%, #62B6FC 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						text-fill-color: transparent;
					}
				}
			}
		}
		.my{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 180rpx;
			background: linear-gradient(281deg, rgba(98, 182, 252) 1%, rgba(95, 88, 253) 77%, rgba(95, 88, 253) 99%);
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 20rpx 40rpx 60rpx;
			border-radius: 20rpx 20rpx 0 0;
			color: #fff;
			.l{
				width: 100rpx;
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}
			.m{
				flex: 1;
				margin-left: 20rpx;
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text{
					color: #FFB400;
					font-size: 20rpx;
				}
			}
			.r{
				width: 100rpx;
				font-size: 28rpx;
				text-align: center;
			}
		}
	}
</style>